<template>
  <div>
	  
	 <el-table
	     :data="songsList"
	     highlight-current-row
	     style="width: 100%"
		 stripe
		 @row-click="PlayingHandle"
         :row-class-name="tableRowClassName"
		 >
		 <el-table-column
          label="索引"  align="left"
		   width="60" >
		    <template slot-scope="scope">
				<i class="iconfont icon-V"  v-if="isplay==true && scope.row.index == playerIndex"></i>
				<span v-else>{{getListIndex(scope.row.index)}}</span>
			</template>
		 </el-table-column>
		<el-table-column
		 label="操作"  align="center"
		  width="50"  v-if="!newsongs">
		   <template slot-scope="scope">
			   <i class="iconfont icon-xihuan" @click="loveHandle(scope.index,scope.row)"></i>
		   </template>
		</el-table-column>
		<el-table-column
		 label="操作"  align="center"
		  width="50"  v-if="newsongs">
		   <template slot-scope="scope">
			   <div class="icon-play">
			   	<el-image :src="scope.row.pic"></el-image>
			   	<i class="iconfont icon-icon_play"></i>
			   </div>
		   </template>
		</el-table-column>
		
		<el-table-column
		 label="音乐标题"  align="left"
		  width="300">
		   <template slot-scope="scope">{{scope.row.name}}</template>
		</el-table-column>
		<el-table-column
		 label="歌手"  align="left"
		  width="200" v-if="!artistDetail">
		   <template slot-scope="scope">	
		   <div>
			   <span>{{scope.row.artist}}</span>
		   </div>
		   </template>
		</el-table-column>
		   <el-table-column
		    label="专辑"  align="left"
		     width="300" v-if="!artistDetail">
		      <template slot-scope="scope">
		       <span>{{scope.row.album}}</span>
		      </template>
		   </el-table-column>
		<el-table-column
		 label="时长"  align="center"
		 >
		   <template slot-scope="scope">{{scope.row.time}}</template>
		</el-table-column>
		
	</el-table>
  </div>
</template>

<script>

import {_getSongUrl} from 'network/detail.js'
import {Song} from 'player/playing.js'
export default {
  name:'SongList',
 
  props:{
	  songsList: {
	    type: Array,
	    default:[],
	  },
	  /**是否是最新音乐页面使用 */
	  newsongs: {
	    type: Boolean,
	    default: false,
	  },
	  // 是否是歌手详情页面
	  artistDetail: {
		  type: Boolean,
		  default: false,
	  },
	  /**如果是播放器内使用双击时只设置index，不提供musicList节省性能 */
	  player: {
	    type: Boolean,
	    default: false,
	  },
  },
	 
  data(){
    return{
      flag:false,
	  flagIndex:false,
	  currentIndex:-1,
	  isplay:false,
	  playerIndex:0,
    }
  },
  created(){
	 console.log()
  },
  computed: {
    getLength() {
      return this.length;
    },
  },
  filters:{
	 
  },
  mounted(){
	  // this.$bus.$on("playing",(index)=>{
	  // })
  },
  methods:{
     loveHandle(index,val){
		
	 },
	getListIndex(index){
		   let currentIndex = 0;	   
		   currentIndex = index< 9 ? '0'+(index+1) : index+1
		   if (currentIndex == this.getLength) {
		     this.$emit("refresh");
		   }
		   return currentIndex
	},
	 tableRowClassName({row, rowIndex}){
		 row.index = rowIndex;
	 }, 
	 PlayingHandle(row, column, event){
		let playList = []
	    for(let i in this.songsList){
			let id = this.songsList[i].id
			const params = {id:id}
		    _getSongUrl(params).then(res => {
				   let url = res.data.data[0].url;
			       let song = new Song(i,this.songsList[i],url,id);
				   playList.push(song);
				   if (i == playList.length - 1) {
			this.isplay =true
			this.playerIndex = row.index
		let playerInfo= {
			playList:playList,
			currentIndex:this.playerIndex,
			songsList:this.songsList, 
			id:id, 
			playing:this.isplay,
		}			 
		this.$store.dispatch("playMusic",playerInfo);
	   // this.$bus.$emit("playMusic", playList, this.playerIndex,this.songsList,this.songsList[i].id);
			  }
			})
		 }
	 }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table td, .el-table th{
	padding: 2px;
}
.icon-play {
	position: relative;
	.icon-icon_play{
		position: absolute;
		top: 0%;
		left: 20%;
		color: #E83C3C;
	}
}
.el-image {
	  width: 100%;
	  height: 100%;
	  border-radius: 4px;
}
</style>
